<template>
  <div class="body-box">
    <window-title title="条件查询"></window-title>
    <el-form :inline="true" size="mini" style="margin-top:20px">
      <el-form-item>
        <el-input placeholder="请输入姓名或手机号查询" v-model="name" style="width:300px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" class="com-btn" size="mini" @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
    <window-title title="结果列表">
      <!-- <span style="float:right">
        <span style="margin-right:10px;">是否公示</span>
        <el-switch v-model="result_show" active-color="#8a70c6" inactive-color="#e1e1e1" @change="setShow"></el-switch>
      </span> -->
    </window-title>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="0">
        <span slot="label">
          全部
          <span class="tab-badge">{{all}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label">
          待审核
          <span class="tab-badge">{{verify}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">
          已同意
          <span class="tab-badge">{{agree}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label">
          已拒绝
          <span class="tab-badge">{{refuse}}</span>
        </span>
      </el-tab-pane>
    </el-tabs>
    <!-- 表格 -->
    <el-table :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}" size="mini" border :data="list.data">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <!-- <el-table-column label="提交内容" prop="content"></el-table-column>
      <el-table-column label="图片" width="80px">
        <template slot-scope="item">
          <el-button
            v-if="item.row.img.length > 0"
            type="text"
            size="mini"
            @click="seeImg(item.row.img)"
          >查看图片</el-button>
        </template>
      </el-table-column> -->
      <el-table-column label="状态">
        <template slot-scope="item">
          <el-tag size="mini" type="primary" v-if="item.row.state == 0">待审核</el-tag>
          <el-tag size="mini" type="success" v-if="item.row.state == 1">已同意</el-tag>
          <el-tag size="mini" type="danger" v-if="item.row.state == 2">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="item">
          <!-- <el-button size="mini" icon="el-icon-check" @click="agrees(item.row.id)" type="text">同意</el-button>
          <el-button size="mini" icon="el-icon-close" @click="refuses(item.row.id)" type="text">拒绝</el-button>
          <el-button
            size="mini"
            icon="el-icon-refresh-right"
            @click="reReturn(item.row.id)"
            type="text"
          >驳回</el-button> -->
          <el-button size="mini" icon="el-icon-view" @click="seeDetail(item.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        background
        small
        :current-page="list.current_page"
        :page-size="list.per_page"
        layout="total, prev, pager, next, jumper"
        :total="list.total"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <!-- 查看任务 -->
    <el-dialog title="查看任务图片" width="600px" :visible.sync="res_model" :append-to-body="true">
      <img
        :src="res_img + '?x-oss-process=image/auto-orient,1'"
        class="see-img"
      />
    </el-dialog>
    <!-- 驳回模态框 -->
    <el-dialog :visible.sync="return_model" width="400px" title="任务驳回" :append-to-body="true">
      <el-radio-group v-model="return_radio">
        <div v-for="(item,key) in reason_arr" :key="key" class="reason-radio">
          <el-radio :label="key">{{item}}</el-radio>
        </div>
      </el-radio-group>
      <el-input type="textarea" v-if="return_radio == 2" placeholder="请输入驳回理由" v-model="reason_txt"></el-input>
      <div style="margin-top:10px;">
        <el-button size="small" class="com-btn" @click="addReturn()">提交</el-button>
      </div>
    </el-dialog>
    <!-- 查看任务详情 -->
    <el-dialog title="任务详情" width="600px" :visible.sync="see_model" :append-to-body="true">
      <el-form size="mini" label-position="top">
        <el-form-item label="提交内容">
          <el-input v-model="result_detail.content" :disabled="true" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <div v-if="result_detail.img.length == 0" style="background:#f1f1f1;width:100%;height:40px;line-height:40px;border-radius:5px;padding-left:15px;color:#999">未上传图片</div>
          <div v-else>
            <el-image fit="cover" v-for="(item,key) in result_detail.img" :key="key" @click="seeDetailImg(item)"  :src="item" class="see-detail-img"></el-image>
          </div>
        </el-form-item>
        <el-form-item v-if="result_detail.state == 0">
          <el-button size="mini" icon="el-icon-check" @click="agrees(result_detail.id)" type="primary">同意</el-button>
          <el-button size="mini" icon="el-icon-close" @click="refuses(result_detail.id)" type="danger">拒绝</el-button>
          <el-button
            size="mini"
            icon="el-icon-refresh-right"
            @click="reReturn(result_detail.id)"
            type="warning"
          >驳回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";

export default {
  props: { active_id: {}},
  components: { windowTitle },
  data() {
    return {
      res_model: false,
      res_info: {},
      activeName: "0",
      is_show: true,
      list: {
        current_page: 1,
         per_page:10,
        total:20,
        data: [
          {
            state:1,
            name:'wl',
            phone:'1585226445'
          }
        ]
      },
      all: 0,
      verify: 0,
      agree: 0,
      refuse: 0,
      name: "",
      load: true,
      img_arr: [],
      img_index: 0,
      return_reason: "",
      return_model: false,
      return_radio: 0,
      reason_arr: ["提交的资料不完整", "提交的内容不符合要求", "其他"],
      reason_txt: "",
      res_id: 0,
      result_show : true,
      result_detail :{img:[]},
      see_model:false ,
      res_img : ''
    };
  },
  mounted() {
  },
  methods: {
    //查看图片
    seeDetailImg(img){
      this.res_model = true;
      this.res_img = img;
    },
    //查看
    seeDetail(data){
      this.see_model = true;
      // this.result_detail = data;
      console.log(data);
    },
    //开启关闭公示
    setShow(){
      this.ajaxs('active/setReultShow',{
        data :{id : this.active_id},
        success:(res) => {
          this.toast(res.code,res.msg);
          if(!res.code) {
            this.result_show = !this.result_show;
          }
        }
      });
    },
    //驳回
    reReturn(id) {
      this.return_model = true;
      this.res_id = id;
    },
    //同意
    agrees(id) {
      this.$confirm("确定同意?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajaxs("active/agreeResult", {
            data: { id: id },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.see_model = false;
              }
            }
          });
        })
        .catch(() => {});
    },
    //拒绝
    // refuses(id) {
    //   this.$confirm("确定拒绝?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       this.ajaxs("active/refuseResult", {
    //         data: { id: id },
    //         success: res => {
    //           this.toast(res.code, res.msg);
    //           if (res.code) {
    //             this.see_model = false;
    //             this.getData();
    //           }
    //         }
    //       });
    //     })
    //     .catch(() => {});
    // },
    //上一站
    // changeImgShow(param) {
    //   if (param == 1) {
    //     if (this.img_index == 0) {
    //       this.img_index = this.img_arr.length - 1;
    //     } else {
    //       this.img_index--;
    //     }
    //   } else {
    //     if (this.img_index == this.img_arr.length - 1) this.img_index = 0;
    //     else this.img_index++;
    //   }
    // },
    //查看图片
    seeImg(img) {
      this.img_arr = img;
      this.img_index = 0;
      this.res_model = true;
    },
    //查看任务
    see(data) {
      this.res_model = true;
      this.res_info = data;
    },
    //获取列表
    // getData() {
    //   this.load = true;
    //   this.ajaxs("active/activeResult", {
    //     data: {
    //       page: this.list.current_page,
    //       active_id: this.active_id,
    //       state: this.activeName,
    //       name: this.name
    //     },
    //     success: res => {
    //       this.list = res.msg.list;
    //       this.all = res.msg.all;
    //       this.verify = res.msg.verify;
    //       this.agree = res.msg.agree;
    //       this.refuse = res.msg.refuse;
    //       this.load = false;
    //       this.result_show = res.msg.res_show;
    //     }
    //   });
    // },
    //切换选项卡
    handleClick() {
      this.list.current_page = 1;
    },
    //查询
    search() {
      this.list.current_page = 1;
    },
    //分页
    changePage(e) {
      this.list.current_page = e;
    }
  }
};
</script>

<style>
.see-img {
  max-width: 100%;
  display: block;
  margin: auto;
}
.reason-radio {
  margin-bottom: 10px;
}
.see-detail-img{
  width:80px;height:80px;margin:0 10px 10px 0;
  border-radius: 5px;
  padding:5px;
  background: #e1e1e1;
  cursor: pointer;
}
</style>